<template>
  <!-- <div>通勤找房页面 -- (李文宇)</div> -->
  <div class="commute">
    <!-- 标题 -->
    <van-nav-bar
      title="通勤找房"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- top -->
    <!-- top1目的地 -->
    <van-dropdown-menu class="target" z-index="99999">
      <div class="target-some">目的地</div>
      <van-dropdown-item
        v-model="state.value1"
        :options="option1"
        @change="commuteData"
      />
      <div class="adress-right-new">
        <van-icon name="arrow" size="15px" />
      </div>
    </van-dropdown-menu>
    <!-- top2行程 -->
    <van-dropdown-menu class="target" z-index="99999">
      <div class="target-some">行程</div>
      <van-dropdown-item
        v-model="state.value2"
        :options="option2"
        @change="commuteData2"
      />
      <div class="adress-right-new">
        <van-icon name="arrow" size="15px" />
      </div>
    </van-dropdown-menu>
    <!-- 交通方式 -->
    <div class="traffic">
      <van-tabs v-model:active="active" @change="tools" line-width="28px">
        <van-tab>
          <template #title>
            <img src="../assets/commute/commute-02.png" alt="" />
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <img src="../assets/commute/commute-03.png" alt="" />
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <img src="../assets/commute/commute-01.png" alt="" />
          </template>
        </van-tab>
        <van-tab>
          <template #title>
            <img src="../assets/commute/commute-04.png" alt="" />
          </template>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 计数 -->
    <div class="statistics">{{ list.length }}套房源满足条件</div>
    <!-- 房源渲染 -->
    <div class="middle">
      <ul>
        <li v-for="item in list" :key="item.id">
          <div class="outside-box" @click="goDetail(item.house_id)">
            <div class="imgbox">
              <div class="imginbox">
                <div class="backgd"></div>
                <img :src="item.imgUrl" alt="" />
                <div class="location">
                  <van-icon
                    name="location"
                    color="#d9d8da"
                    size="12px"
                  />&nbsp;{{ item.room ? item.room + "、" : ""
                  }}{{
                    item.inform[0]
                      ? item.inform[3]
                        ? item.inform[0] + "、" + item.inform[3]
                        : item.inform[0]
                      : ""
                  }}
                </div>
              </div>
            </div>
            <div class="inlist">
              <div class="details">{{ item.lease }} {{ item.apartment }}</div>
              <div class="wond-water">{{ item.area }}m²·{{ item.face }}</div>
              <div class="mmv">
                <div class="money">{{ item.price }}</div>
                <div class="mouthsvalue">元/月</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 排序\筛选 -->
    <div class="sort-filter">
      <div class="sort">
        <img
          src="../assets/commute/commute-07.png"
          alt=""
          style="width: 30px; height: 30px"
        />
        <span @click="up">&nbsp;升序</span>
      </div>
      <div class="filter">
        <img
          src="../assets/commute/commute-06.png"
          alt=""
          style="width: 30px; height: 30px"
        />
        <span @click="np">&nbsp;降序</span>
      </div>
    </div>
    <div class="baletu-bottom">
      <div class="baletu-img">
        <img src="../assets/commute/commute-08.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
//引入接口
import { getRenderData, priceAscOrder, priceDescOrder } from "../utils/app";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
export default {
  //vue3部分
  setup() {
    //top选择

    const active = ref(0);

    const state = reactive({
      value1: "上城区客运中心",
      value2: "0,30",
      parametersList: [],
      name: 0,
    });
    //组件的js部分
    const option1 = [
      { text: "上城区客运中心", value: "上城区客运中心" },
      { text: "杭州东站", value: "杭州东站" },
      { text: "杭州南站", value: "杭州南站" },
    ];
    const option2 = [
      { text: "00分钟~30分钟", value: "0,30" },
      { text: "30分钟~60分钟", value: "30,60" },
      { text: "60分钟~90分钟", value: "60,90" },
      { text: "90分钟~120分钟", value: "90,120" },
    ];
    //传送行程，事件，tool行驶工具得参数
    //结论，默认不会打印，点击后打印，也就是以下value，name等数据一开始不会得到，所以一开始用固定数据进行渲染，然后如有点击事件则进行数据上传
    const commuteData = (value) => {
      state.value1 = value;
      parameters();
      console.log(...state.parametersList);
    };

    const commuteData2 = (value) => {
      state.value2 = value;
      console.log(state.value2.split(",")[0]);
      parameters();
      console.log(...state.parametersList);
    };

    const tools = (name) => {
      state.name = name;
      parameters();
      console.log(...state.parametersList);
    };

    const parameters = () => {
      state.parametersList = [];
      state.parametersList.push(state.value1, state.value2, state.name);
    };
    // 返回提醒及路由
    const router = useRouter();
    const onClickLeft = () => {
      router.push({
        path: "/home",
        query: {
          id: "12",
        },
      });
    };
    return {
      onClickLeft,
      state,
      option1,
      option2,
      commuteData,
      commuteData2,
      tools,
      parameters,
      active,
    };
  },
  //vue2部分
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.all();
  },
  methods: {
    //进入页面的全局渲染
    async all() {
      const res = await getRenderData();
      this.list = res.result;
    },
    //升序
    async up() {
      const res = await priceAscOrder();
      this.list = res.list;
    },
    //降序
    async np() {
      const res = await priceDescOrder();
      this.list = res.list;
    },
    // 跳转详情页
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>
<style lang="less">
.commute {
  background: #fafafa;
  position: relative;
  //  traffic交通
  .traffic {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 10px 7px rgba(182, 181, 181, 0.45);
    position: relative;
    .van-tab--active {
      color: red;
    }
    .van-tabs {
      height: 100%;
    }
    img {
      line-height: 76px;
      width: 24px;
    }
  }
  .statistics {
    overflow: hidden;
    width: 100%;
    height: 40px;
    line-height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #8e8e8e;
    text-align: center;
    padding: 14px 0;
    background: #fafafa;
  }
  .middle li {
    display: inline-block;
    width: 50%;
  }
  .middle {
    width: 100%;
    padding: 0 15px;
    overflow: hidden;
    background: #fafafa;
    .outside-box {
      width: 100%;
      height: 208px;
      margin-bottom: 30px;
      .imgbox {
        .imginbox {
          position: relative;
          width: 168px;
          height: 113px;
          //定位
          .backgd {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 167px;
            height: 30px;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
          }
          .location {
            position: absolute;
            width: 150px;
            left: 8px;
            bottom: 7px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 700;
            color: #d9d8da;
            z-index: 999;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          img {
            width: 168px;
            height: 113px;
            border-radius: 5px 5px 0px 0px;
            z-index: 9;
          }
        }
      }
      .inlist {
        width: 100%;
        height: 98px;
        background: #ffffff;
        margin-right: 0;
        .details {
          width: 100%;
          font-size: 14px;
          line-height: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .wond-water {
          width: 100%;
          line-height: 32px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #636363;
        }
        .mmv {
          width: 100%;
          line-height: 32px;
          .money {
            float: left;
            line-height: 34px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #e81f35;
          }
          .mouthsvalue {
            float: left;
            line-height: 32px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #e81f35;
            margin-top: 3px;
          }
        }
      }
    }
  }
  .middle li:nth-child(even) {
    padding-left: 5px;
  }
  .middle li:nth-child(odd) {
    padding-right: 5px;
  }
  // <!-- 排序\筛选 -->
  .sort-filter {
    position: fixed;
    bottom: 50px;
    left: 106px;
    width: 163px;
    height: 40px;
    background: #ffffff;
    box-shadow: 0px 1px 4px 1px rgba(182, 181, 181, 0.45);
    border-radius: 20px;
    z-index: 99999;
    .sort,
    .filter {
      width: 50%;
      height: 100%;
      float: left;
      line-height: 100%;
      text-align: center;
      img {
        width: 14px;
        height: 15px;
        display: inline-block;
        line-height: 40px;
        vertical-align: middle;
      }
      span {
        font-size: 14px;
        line-height: 40px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      span:hover {
        color: red;
      }
    }
  }
  // 底部
  .baletu-bottom {
    width: 100%;
    height: 120px;
    padding: 5px 15px;
    text-align: center;
    position: relative;
    .baletu-img {
      width: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999999;
      background: #fafafa;
      img {
        box-shadow: 10px 10px 10px #fafafa;
      }
    }
  }
}

.commute /deep/ .van-tabs__line {
  display: none;
}
.commute /deep/ .van-tabs__wrap {
  height: 100%;
  margin-top: 0;
}
.commute /deep/ .van-tabs__nav {
  padding-bottom: 0;
}

//top下拉
.commute .target {
  position: relative;
  .target-some {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #595959;
  }
  .adress-right-new {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9c9c9c;
  }
}
.commute /deep/.van-dropdown-menu__title::after {
  display: none;
}
.commute .van-dropdown-menu__bar {
  box-shadow: none;
}
</style>
